<template>
    <div class="dashboard-container">
        <div class="app-container">
            <el-card shadow="never">
                <div class="top">
                    <top-form @render="render($event)"></top-form>
                </div>

                <div class="center">
                    <el-alert
                        :title="`共有 ${total} 条数据`"
                        type="info"
                        :closable="false"
                        show-icon>
                    </el-alert>
                </div>

                <div class="bottom">
                    <template>
                        <el-table
                            :data="tableData"
                            style="width: 100%">
                            <el-table-column
                                prop="number"
                                min-width="150px"
                                label="编号">
                            </el-table-column>
                            <el-table-column
                                prop="subject"
                                min-width="60px"
                                label="学科">
                            </el-table-column>
                            <el-table-column
                                prop="catalog"
                                min-width="100px"
                                label="目录">
                            </el-table-column>
                            <el-table-column
                                prop="questionType"
                                min-width="60px"
                                label="题型">
                                <template v-slot="scope">
                                    {{ questionType(scope.row.questionType) }}
                                </template>
                            </el-table-column>
                            <el-table-column
                                prop="question"
                                min-width="180px"
                                label="题干">
                                <template v-slot="scope">
                                    {{ formatting(scope.row.question) }}
                                </template>
                            </el-table-column>
                            <el-table-column
                                prop="difficulty"
                                min-width="60px"
                                label="难度">
                                <template v-slot="scope">
                                    {{ difficulty(scope.row.difficulty) }}
                                </template>
                            </el-table-column>
                            <el-table-column
                                prop="creator"
                                min-width="100px"
                                label="录入人">
                            </el-table-column>
                            <el-table-column
                                prop="addDate"
                                min-width="150px"
                                label="录入时间">
                                <template v-slot="scope">
                                    {{ timeFormat(scope.row.addDate) }}
                                </template>
                            </el-table-column>
                            <el-table-column
                                label="操作"
                                width="180">
                                <template v-slot="scope">
                                    <el-button @click="openDialog(scope.row.id)" size="small" type="primary" plain circle icon="el-icon-view"></el-button>
                                    <el-button @click="edit(scope.row.id)" size="small" type="success" plain circle icon="el-icon-edit"></el-button>
                                    <el-button @click="add($event, scope.row.id)" size="small" type="warning" plain circle icon="el-icon-star-off"></el-button>
                                    <el-button @click="del($event, scope.row.id)" size="small" type="danger" plain circle icon="el-icon-delete"></el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <div class="footer">
                            <el-pagination
                                background
                                @size-change="sizeChange"
                                @current-change="currentChange"
                                :current-page="page"
                                :page-sizes="[5, 10, 20, 50]"
                                :page-size="5"
                                layout="prev, pager, next, sizes, jumper"
                                :total="total">
                            </el-pagination>
                        </div>
                    </template>
                </div>
            </el-card>
        </div>

        <view-dialog v-model="showDialog" :currentID="currentID"></view-dialog>
    </div>
</template>

<script>
import { getQuestionList, delQuestionItem, setQuestionChoice } from '@/api/hmmm/questions'
import dayjs from "dayjs"

export default {
    created () {
        this.render(this.form)
    },
    data () {
        return {
            showDialog: false,
            form: {},
            currentID: 0,
            tableData: [],
            page: 1,
            pageSize: 5,
            total: 0,
        }
    },
    methods: {
        async render (data) {
            if (Object.keys(data).length !== 0) this.page = 1
            this.form = data
            const res = await getQuestionList({
                ...data,
                page: this.page,
                pagesize: this.pageSize
            })
            this.tableData = res.data.items
            this.total = res.data.counts
        },
        edit (id) {
            this.$router.push({
                path: '/questions/new',
                query: {
                    id: id
                }
            })
        },
        openDialog (id) {
            this.showDialog = true
            this.currentID = id
        },
        del (e, id) {
            e.target.blur()
            e.target.parentNode.blur()
            this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                const res = await delQuestionItem({
                    id: id
                })
                if (res.data.success) {
                    this.$message.success('删除成功')
                    if (this.tableData.length === 1 && this.page > 1) this.page--
                    await this.render(this.form)
                }
            }).catch(() => {});
        },
        async add (e, id) {
            e.target.blur()
            e.target.parentNode.blur()
            this.$confirm('确定要将此题目添加到精选题库吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                const res = await setQuestionChoice({
                    id: id,
                    choiceState: 1
                })
                if (res.data.success) {
                    this.$message.success('添加成功')
                    await this.render(this.form)
                }
            }).catch(() => {});
        },
        questionType (type) {
            if (type === '1') return '单选'
            if (type === '2') return '多选'
            if (type === '3') return '简答'
        },
        formatting (content) {
            const reg = /<[^>]+>/g
            return content.replace(reg, '')
        },
        difficulty (type) {
            if (type === '1') return '简单'
            if (type === '2') return '一般'
            if (type === '3') return '困难'
        },
        timeFormat (time) {
            const obj = new dayjs(time)
            return obj.format('YYYY-MM-DD HH:mm:ss')
        },
        sizeChange (val) {
            this.pageSize = val
            this.page = 1
            this.render(this.form)
        },
        currentChange (val) {
            this.page = val
            this.render(this.form)
        }
    }
}
</script>

<style scoped lang="scss">
.dashboard-container {
    .app-container {
        padding: 5px 10px;

        .center {
            padding-bottom: 16px;
        }

        .bottom {
            ::v-deep .el-table {
                border-top: 1px solid #EBEEF5;
                border-left: 1px solid #EBEEF5;
                border-right: 1px solid #EBEEF5;

                thead tr {
                    th:nth-of-type(9) {
                        text-align: center;
                    }
                }

                .cell {
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    -webkit-box-orient: vertical;
                }
            }

            .footer {
                display: flex;
                justify-content: end;

                .el-pagination {
                    padding: 20px 0;

                    ::v-deep .el-pagination__jump {
                        margin-left: -5px;
                    }
                }
            }
        }
    }
}
</style>
